<script setup>
import useUser from '@/store/user'
import useChannel from '@/store/channel'
import { transformTimeStamp } from '@/utils/dialog-utils'
import useEventBus from '@/use/use-event-bus.js'
import MessageRender from '@/components/message-box/components/MessageRender.vue'
import { useRoute, useRouter } from 'vue-router'

const props = defineProps({
  message: Object,
  showCheckBox: Boolean,
  disabledOperation: Boolean,
  disabledFooter: Boolean,
  checked: Boolean,
})
const emit = defineEmits(['openContextmenu', 'check', 'reply', 'resetPinMsgList', 'openPinMsgDialog'])
const channelStore = useChannel()
const eventBus = useEventBus()
const router = useRouter()

const { userId, id, channelId, createUser } = toRefs(props.message)
const timeStamp = computed(() => {
  return transformTimeStamp(props.message.createTime)
})

function retransmission() {
  emit('resetPinMsgList', id.value)
}

function jumpMessage() {
  router
    .push({ name: 'Dialog', query: { channelId: channelId.value, jumpId: id.value }, params: { type: 'message' } })
    .then(() => {
      const channel = channelStore.channelList.find((i) => i.id === channelId.value)
      channelStore.setDialog(channel)
    })
}
</script>

<template>
  <div class="pin-message-card" @click="jumpMessage()">
    <div class="card-title">
      <div class="title-info">
        <el-avatar
          :src="channelStore.memberAvatarMap.get(userId)"
          :size="30"
          @click="eventBus.emit('openPostcard', userId)">
          {{ createUser.slice(-2) }}
        </el-avatar>
        <div class="header">
          <div class="user-name">{{ createUser }}</div>
          <div class="time-stamp">发送于 {{ timeStamp }}</div>
        </div>
      </div>
      <div class="title-control">
        <el-tooltip content="取消Pin" :hide-after="0" placement="top">
          <SvgIcon
            name="msg-unpin"
            size="12"
            style="cursor: pointer"
            @click.stop="emit('openPinMsgDialog', props.message)"></SvgIcon>
        </el-tooltip>
        <el-tooltip content="回到原文" :hide-after="0" placement="top">
          <SvgIcon name="message-jump" size="12" style="cursor: pointer" @click.stop="jumpMessage"></SvgIcon>
        </el-tooltip>
        <el-tooltip content="转发" :hide-after="0" placement="top">
          <SvgIcon name="msg-forward" size="12" style="cursor: pointer" @click.stop="retransmission"></SvgIcon>
        </el-tooltip>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="card-content">
      <MessageRender :message="props.message" disabled-operation @reply="emit('reply', $event)"></MessageRender>
    </div>
  </div>
</template>

<style scoped lang="scss">
.pin-message-card {
  position: relative;
  padding: 20px;
  background: var(--elp-color-info-light-9);
  border-radius: 8px;
  margin-bottom: 15px;
  margin-top: 10px;
  &:hover {
    box-shadow: var(--elp-box-shadow);
  }
  cursor: pointer;
  .card-title {
    @include use-flex(center, space-between);
    .title-info {
      @include use-flex(center);
      .header {
        margin-left: 10px;
        font-size: 12px;
      }
    }
    .title-control {
      @include use-flex(center);
      .svg-icon {
        margin: 0 2px;
      }
    }
  }
  .el-divider--horizontal {
    margin: 12px 0;
  }
  .card-content {
    overflow: auto;
  }
}
</style>
